<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Page Details:  Time On Page (Alert)</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="JavaScript Source Code 3000">
<META NAME="section" CONTENT="Page Details">
<META NAME="description" CONTENT="If you want to show your visitors how long they have been on your page but don't exactly like those clock displays, then you might like this script.  When the visitor leaves or clicks the button, they are alerted to the time they have been on your page.  Many times, they won't even expect it!">

<SCRIPT LANGUAGE="JavaScript">
<!--  Begin
var onHours = " ";
var onMinutes = " ";
var onSeconds = " ";
var offHours = 0;
var offMinutes = 0;
var offSeconds = 0;
var logSeconds = 0;
var logMinutes = 0;
var logHours = 0;
var OnTimeValue = " ";
var OffTimeValue = " ";
var PageTimeValue = " ";
function getLogonTime() {
var now = new Date();
var ampm = (now.getHours() >= 12) ? " P.M." : " A.M."
var Hours = now.getHours();
Hours = ((Hours > 12) ? Hours - 12 : Hours);
var Minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes();
var Seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds();
OnTimeValue =(" "
+ Hours
+ Minutes
+ Seconds
+ " "
+ ampm);
onHours = now.getHours();
onMinutes = now.getMinutes();
onSeconds = now.getSeconds();  
}
function getLogoffTime() {
var now = new Date();
var ampm = (now.getHours() >= 12) ? " P.M." : " A.M."
var Hours = now.getHours();
Hours = ((Hours > 12) ? Hours - 12 : Hours);
var Minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes();
var Seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds();
OffTimeValue =(" "
+ Hours
+ Minutes
+ Seconds
+ " "
+ ampm);
offHours = now.getHours();
offMinutes = now.getMinutes();
offSeconds = now.getSeconds();
timer(); 
}
function timer() { 
if (offSeconds >= onSeconds) { 
logSeconds = offSeconds - onSeconds; }
else {
offMinutes -= 1;
logSeconds = (offSeconds + 60) - onSeconds;      
}
if (offMinutes >= onMinutes) { 
logMinutes = offMinutes - onMinutes; }
else {
offHours -= 1;
logMinutes = (offMinutes + 60) - onMinutes;
}
logHours = offHours - onHours;
logHours =  ((logHours < 10) ? "0" : ":") + logHours;
logMinutes = ((logMinutes < 10) ? ":0" : ":") + logMinutes;
logSeconds = ((logSeconds < 10) ? ":0" : ":") +logSeconds;
PageTimeValue =(" "
+ logHours
+ logMinutes
+ logSeconds);
displayTimes();
}
function displayTimes() {
alert("\nLOG ON TIME    : " +OnTimeValue+"\n\nLOG OFF TIME  : "+OffTimeValue+"\n\nTIME ON PAGE : " + PageTimeValue);
}
// End -->
</SCRIPT>
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff onLoad="getLogonTime()" onUnLoad="getLogoffTime()">

<BR>
<center>
<table width="600" cellpadding="0" cellspacing="10">
<tr>
<td width="468" align="center">

	
</td>
<td width="120" align="center">

	
</td>
</tr>
</table>
<BR>
<BR>
<BASEFONT SIZE=3>
  <FONT SIZE=6>
<B><FONT SIZE="+2" FACE="Helvetica,Arial" ALIGN=RIGHT COLOR="#0000FF">
<b><A HREF="../index.htm" /" TARGET="_top">
Home</A> </b><img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <b><A HREF="index.htm" /page-details/"><font color="#FF0000">Page Details</font></A> </b>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <FONT COLOR="#006666">Time On Page (Alert)</FONT></b></FONT><BR>
</B><BR>
  </FONT>
<TABLE BORDER=0 WIDTH=500 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE=" helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->

If you want to show your visitors how long they have been on your page but don't exactly like those clock displays, then you might like this script.  When the visitor leaves or clicks the button, they are alerted to the time they have been on your page.  Many times, they won't even expect it!<br><hr>
</td></tr>
</table>
<!--  Demonstration  -->
<BODY>
<CENTER>
<FORM>
<INPUT TYPE="button" value="Time on Page" onClick="getLogoffTime()">
</FORM>
</CENTER>
<P>
<BR>
<P>
<a name="source">
<TABLE BORDER=0 WIDTH=500 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Page Details:  Time On Page (Alert)</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as NotePad or SimpleText) and save (Control-s or Apple-s).  The script is yours!<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  2.92 KB  " size="24">
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- THREE STEPS TO INSTALL TIME ON PAGE (ALERT):

   1.  Paste the coding into the HEAD of your HTML document
   2.  Copy the onLoad event handler into the BODY tag
   3.  Add the last code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Copy this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!--  Begin
var onHours = " ";
var onMinutes = " ";
var onSeconds = " ";
var offHours = 0;
var offMinutes = 0;
var offSeconds = 0;
var logSeconds = 0;
var logMinutes = 0;
var logHours = 0;
var OnTimeValue = " ";
var OffTimeValue = " ";
var PageTimeValue = " ";

function getLogonTime() {
var now = new Date();
var ampm = (now.getHours() &gt;= 12) ? " P.M." : " A.M."
var Hours = now.getHours();
Hours = ((Hours &gt; 12) ? Hours - 12 : Hours);
var Minutes = ((now.getMinutes() &lt; 10) ? ":0" : ":") + now.getMinutes();
var Seconds = ((now.getSeconds() &lt; 10) ? ":0" : ":") + now.getSeconds();
OnTimeValue =(" "
+ Hours
+ Minutes
+ Seconds
+ " "
+ ampm);
onHours = now.getHours();
onMinutes = now.getMinutes();
onSeconds = now.getSeconds();  
}
function getLogoffTime() {
var now = new Date();
var ampm = (now.getHours() &gt;= 12) ? " P.M." : " A.M."
var Hours = now.getHours();
Hours = ((Hours &gt; 12) ? Hours - 12 : Hours);
var Minutes = ((now.getMinutes() &lt; 10) ? ":0" : ":") + now.getMinutes();
var Seconds = ((now.getSeconds() &lt; 10) ? ":0" : ":") + now.getSeconds();
OffTimeValue =(" "
+ Hours
+ Minutes
+ Seconds
+ " "
+ ampm);
offHours = now.getHours();
offMinutes = now.getMinutes();
offSeconds = now.getSeconds();
timer(); 
}
function timer() { 
if (offSeconds &gt;= onSeconds) { 
logSeconds = offSeconds - onSeconds; }
else {
offMinutes -= 1;
logSeconds = (offSeconds + 60) - onSeconds;      
}
if (offMinutes &gt;= onMinutes) { 
logMinutes = offMinutes - onMinutes; }
else {
offHours -= 1;
logMinutes = (offMinutes + 60) - onMinutes;
}
logHours = offHours - onHours;
logHours =  ((logHours &lt; 10) ? "0" : ":") + logHours;
logMinutes = ((logMinutes &lt; 10) ? ":0" : ":") + logMinutes;
logSeconds = ((logSeconds &lt; 10) ? ":0" : ":") +logSeconds;
PageTimeValue =(" "
+ logHours
+ logMinutes
+ logSeconds);
displayTimes();
}
function displayTimes() {
alert("\nLOG ON TIME    : " +OnTimeValue+"\n\nLOG OFF TIME  : "+OffTimeValue+"\n\nTIME ON PAGE : " + PageTimeValue);
}
// End --&gt;
&lt;/SCRIPT&gt;

&lt;!-- STEP TWO: Add this onLoad event handler into the BODY tag  --&gt;

&lt;BODY onLoad="getLogonTime()"&gt;

&lt;!-- STEP THREE: Put this code into the BODY of your HTML document  --&gt;

&lt;CENTER&gt;
&lt;FORM&gt;
&lt;INPUT TYPE="button" value="Time on Page" onClick="getLogoffTime()"&gt;
&lt;/FORM&gt;
&lt;/CENTER&gt;

 

&lt;!-- Script Size:  2.92 KB  --&gt;
</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>